<!DOCTYPE html>
<html lang="en">

<head>
     
    <meta charset="UTF-8" />
     
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Vue 3 Composition API Example</title>
     
    <link href="style.css" rel="stylesheet" />
     
    <script src="https://unpkg.com/vue@3.4.0"></script>
</head>

<body>
      <div id="app">
            <h1>{{ message }}</h1>
            <input v-model="inputValue" placeholder="输入一些内容" />
            <button @click="updateMessage">更新信息</button>
          </div>
     
    <script>
        const { createApp, ref } = Vue;
        const App = {
            setup() {
                const message = ref("让我们开始Vue3模板指令之旅吧！");
                const inputValue = ref("");

                const updateMessage = () => {
                    message.value = inputValue.value;
                };

                return {
                    message,
                    inputValue,
                    updateMessage
                };
            }
        };
        createApp(App).mount("#app");
    </script>
</body>

</html>